<?php if (!defined('THINK_PATH')) exit(); /*a:1:{s:90:"D:\Develop\phpStudy\PHPTutorial\WWW\hhyy-game/application/api\view\activity\turntable.html";i:1560434531;}*/ ?>
<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>幸运抽奖盘</title>
	<link href="../../public/static/api/activity/css/style.css?123" rel="stylesheet" type="text/css">
	<style>
		.jq22-container{
			margin: 0 auto;
		}
		.jq22-content{
			position: absolute;
			width: 100%;
			height: auto;
			margin: 0px auto;
			margin-top: 58%;
		}
		.layui-m-layermain, .layui-m-layershade{
			position: fixed;
			left: 0;
			top: -50% !important;
			width: 100%;
			height: 100%;
		}
		.hint{
			color:#FFFFFF;font-size:14px;
			position:absolute;
			bottom:10px;
			width: 100%;
			text-align: center;
		}
	</style>
</head>

<body style="background-color:#E4C896;">

		<div class="jq22-content" style="margin-top: 1%;">
			<img src="../../public/static/api/activity/images/zs.png" id="fen-img" style="display:none;" />
			<img src="../../public/static/api/activity/images/zs.png" id="zuliao-img" style="display:none;" />
			<img src="../../public/static/api/activity/images/zs.png" id="baowen-img" style="display:none;" />
			<img src="../../public/static/api/activity/images/zs.png" id="yundou-img" style="display:none;" />
			<img src="../../public/static/api/activity/images/zs.png" id="ganlan-img" style="display:none;" />
			<img src="../../public/static/api/activity/images/zs.png" id="yusan-img" style="display:none;" />
			<div class="banner">
				<div class="turnplate" style="background-image:url(../../public/static/api/activity/images/turnplate-bg.png);background-size:100% 100%;">
					<canvas class="item" id="wheelcanvas" width="422px" height="422px" style="margin-top: -1%;"></canvas>
					<img class="pointer" src="../../public/static/api/activity/images/turnplate-pointer.png"/>
				</div>
			</div>
			<div class="hint"><span class="hint-text"><?php echo $hint; ?></span></div>
		</div>

	<script type="text/javascript" src="../../public/static/api/activity/js/jquery.min.js"></script>
	<script type="text/javascript" src="../../public/static/api/activity/js/awardRotate.js"></script>
	<script type="text/javascript" src="../../public/static/api/js/layer.js"></script>
	<script type="text/javascript">
	var turnplate={
			restaraunts:[],				//大转盘奖品名称
			colors:[],					//大转盘奖品区块对应背景颜色
			outsideRadius:176,			//大转盘外圆的半径
			textRadius:155,				//大转盘奖品位置距离圆心的距离
			insideRadius:50,			//大转盘内圆的半径
			startAngle:0,				//开始角度
			bRotate:false				//false:停止;ture:旋转
	};

	$(document).ready(function(){
		//动态添加大转盘的奖品与奖品区域背景颜色
		var config_val = "<?php echo $config_val; ?>";
		turnplate.restaraunts = config_val.split(',');
		turnplate.colors = ["#AC682E", "#C88D50", "#AC682E", "#C88D50","#AC682E", "#C88D50", "#AC682E", "#C88D50","#AC682E", "#C88D50"];
		var rotateTimeOut = function (){
			$('#wheelcanvas').rotate({
				angle:0,
				animateTo:2160,
				duration:8000,
				callback:function (){
					alert('网络超时，请检查您的网络设置！');
				}
			});
		};

		//旋转转盘 item:奖品位置; txt：提示语;
		var rotateFn = function (item, txt){
			var angles = item * (360 / turnplate.restaraunts.length) - (360 / (turnplate.restaraunts.length*2));
			if(angles<270){
				angles = 270 - angles; 
			}else{
				angles = 360 - angles + 270;
			}
			$('#wheelcanvas').stopRotate();
			$('#wheelcanvas').rotate({
				angle:0,
				animateTo:angles+1800,
				duration:8000,
				callback:function (){
					//中奖提示
					turnplate.bRotate = !turnplate.bRotate;
					//发送数据至后台
                    $.post("<?php echo url('turntable'); ?>", {uid:"<?php echo $uid; ?>",sKey:"<?php echo $sKey; ?>",get_number:txt}, function(data){
                        var data = eval("("+data+")");
                        layer.open({
                            content: data.msg,
							//btn:'确定',
							skin: 'msg',
							time: 2 //2秒后自动关闭
                        });
                        if(data.code != 0){
							$('.hint-text').text('今日已获得'+data.code+'钻石');
						}
                    }, 'json');
				}
			});
		};

		$('.pointer').click(function (){
			if(turnplate.bRotate)return;
			turnplate.bRotate = !turnplate.bRotate;
			//获取随机数(奖品个数范围内)
			var item = rnd(1,turnplate.restaraunts.length);
			//奖品数量等于10,指针落在对应奖品区域的中心角度[252, 216, 180, 144, 108, 72, 36, 360, 324, 288]
			rotateFn(item, turnplate.restaraunts[item-1]);
			//  switch (item) {
			// 	case 1:
			// 		rotateFn(252, turnplate.restaraunts[0]);
			// 		break;
			// 	case 2:
			// 		rotateFn(216, turnplate.restaraunts[1]);
			// 		break;
			// 	case 3:
			// 		rotateFn(180, turnplate.restaraunts[2]);
			// 		break;
			// 	case 4:
			// 		rotateFn(144, turnplate.restaraunts[3]);
			// 		break;
			// 	case 5:
			// 		rotateFn(108, turnplate.restaraunts[4]);
			// 		break;
			// 	case 6:
			// 		rotateFn(72, turnplate.restaraunts[5]);
			// 		break;
			// 	case 7:
			// 		rotateFn(36, turnplate.restaraunts[6]);
			// 		break;
			// 	case 8:
			// 		rotateFn(360, turnplate.restaraunts[7]);
			// 		break;
			// 	case 9:
			// 		rotateFn(324, turnplate.restaraunts[8]);
			// 		break;
			// 	case 10:
			// 		rotateFn(288, turnplate.restaraunts[9]);
			// 		break;
			// }
			console.log(item);
		});
	});

	function rnd(n, m){

	    n=1;//最小随机数
	    m=100;//最大随机数（概率范围最大值）
		//最大数数不超过最大随机数
        var ransluck = [50,60,65,70,75,80,85,90,95,100];//概率为比自己小的第一个数之间的差
		var randoms = Math.floor(Math.random()*(m-n+1)+n);
		if(randoms<=ransluck[0])
		{
            var random = 1;
		}
		else if(randoms<=ransluck[1])
		{
            var random = 2;
		}
        else if(randoms<=ransluck[2])
        {
            var random = 3;
        }
        else if(randoms<=ransluck[3])
        {
            var random = 4;
        }
        else if(randoms<=ransluck[4])
        {
            var random = 5;
        }
        else if(randoms<=ransluck[5])
        {
            var random = 6;
        }
        else if(randoms<=ransluck[6])
        {
            var random = 7;
        }
        else if(randoms<=ransluck[7])
        {
            var random = 8;
        }
        else if(randoms<=ransluck[8])
        {
            var random = 9;
        }
        else if(randoms<=ransluck[9])
        {
            var random = 10;
        }
        //alert(randoms);
        //alert(random);
		return random;
		
	}


	//页面所有元素加载完毕后执行drawRouletteWheel()方法对转盘进行渲染
	window.onload=function(){
		drawRouletteWheel();
	};

	function drawRouletteWheel() {    
	  var canvas = document.getElementById("wheelcanvas");    
	  if (canvas.getContext) {
		  //根据奖品个数计算圆周角度
		  var arc = Math.PI / (turnplate.restaraunts.length/2);
		  var ctx = canvas.getContext("2d");
		  //在给定矩形内清空一个矩形
		  ctx.clearRect(0,0,422,422);
		  //strokeStyle 属性设置或返回用于笔触的颜色、渐变或模式  
		  ctx.strokeStyle = "#FFBE04";
		  //font 属性设置或返回画布上文本内容的当前字体属性
		  ctx.font = '16px Microsoft YaHei';      
		  for(var i = 0; i < turnplate.restaraunts.length; i++) {       
			  var angle = turnplate.startAngle + i * arc;
			  ctx.fillStyle = turnplate.colors[i];
			  ctx.beginPath();
			  //arc(x,y,r,起始角,结束角,绘制方向) 方法创建弧/曲线（用于创建圆或部分圆）    
			  ctx.arc(211, 211, turnplate.outsideRadius, angle, angle + arc, false);    
			  ctx.arc(211, 211, turnplate.insideRadius, angle + arc, angle, true);
			  ctx.stroke();  
			  ctx.fill();
			  //锁画布(为了保存之前的画布状态)
			  ctx.save();   
			  
			  //----绘制奖品开始----
			  ctx.fillStyle = "#FFFFFF";
			  var text = turnplate.restaraunts[i];
			  var line_height = 17;
			  //translate方法重新映射画布上的 (0,0) 位置
			  ctx.translate(211 + Math.cos(angle + arc / 2) * turnplate.textRadius, 211 + Math.sin(angle + arc / 2) * turnplate.textRadius);
			  
			  //rotate方法旋转当前的绘图
			  ctx.rotate(angle + arc / 2 + Math.PI / 2);
			  
			  /** 下面代码根据奖品类型、奖品名称长度渲染不同效果，如字体、颜色、图片效果。(具体根据实际情况改变) **/
			  if(text.indexOf("M")>0){
			      //流量包
				  var texts = text.split("M");
				  for(var j = 0; j<texts.length; j++){
					  ctx.font = j == 0?'bold 20px Microsoft YaHei':'16px Microsoft YaHei';
					  if(j == 0){
						  ctx.fillText(texts[j]+"M", -ctx.measureText(texts[j]+"M").width / 2, j * line_height);
					  }else{
						  ctx.fillText(texts[j], -ctx.measureText(texts[j]).width / 2, j * line_height);
					  }
				  }
			  }else if(text.indexOf("M") == -1 && text.length>6){
			      //奖品名称长度超过一定范围
				  text = text.substring(0,6)+"||"+text.substring(6);
				  var texts = text.split("||");
				  for(var j = 0; j<texts.length; j++){
					  ctx.fillText(texts[j], -ctx.measureText(texts[j]).width / 2, j * line_height);
				  }
			  }else{
				  //在画布上绘制填色的文本。文本的默认颜色是黑色
				  //measureText()方法返回包含一个对象，该对象包含以像素计的指定字体宽度
				  ctx.fillText(text, -ctx.measureText(text).width / 2, 0);
			  }
			  
			  //添加对应图标
			  if(text.indexOf("钻石")>0){
				  var img= document.getElementById("fen-img");
				  img.onload=function(){  
					  ctx.drawImage(img,-15,10);      
				  }; 
				  ctx.drawImage(img,-15,10);  
			  }else if(text.indexOf("钻石")>=0){
				  var img= document.getElementById("zuliao-img");
				  img.onload=function(){  
					  ctx.drawImage(img,-15,10);      
				  };  
				  ctx.drawImage(img,-15,10);  
			  }
              else if(text.indexOf("钻石")>=0){
                  var img= document.getElementById("baowen-img");
                  img.onload=function(){
                      ctx.drawImage(img,-15,10);
                  };
                  ctx.drawImage(img,-15,10);
              }
              else if(text.indexOf("钻石")>=0){
                  var img= document.getElementById("yundou-img");
                  img.onload=function(){
                      ctx.drawImage(img,-15,10);
                  };
                  ctx.drawImage(img,-15,10);
              }
              else if(text.indexOf("钻石")>=0){
                  var img= document.getElementById("ganlan-img");
                  img.onload=function(){
                      ctx.drawImage(img,-15,10);
                  };
                  ctx.drawImage(img,-15,10);
              }
              else if(text.indexOf("钻石")>=0){
                  var img= document.getElementById("yusan-img");
                  img.onload=function(){
                      ctx.drawImage(img,-15,10);
                  };
                  ctx.drawImage(img,-15,10);
              }

			  //把当前画布返回（调整）到上一个save()状态之前 
			  ctx.restore();
			  //----绘制奖品结束----
		  }     
	  } 
	}

	</script>
</body>
</html>